<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" 
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>预警详情 - 智能营养管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-exclamation-triangle me-2"></i>预警详情</h2>
            <div class="d-flex gap-2">
                <a th:href="@{/alerts}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i>返回预警中心
                </a>
            </div>
        </div>

        <!-- 日期信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-calendar me-2"></i>
                    <span th:text="${#temporals.format(date, 'yyyy年MM月dd日')}"></span>
                    <span th:if="${isToday}" class="badge bg-primary ms-2">今天</span>
                </h5>
            </div>
        </div>

        <!-- 预警详情 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-list me-2"></i>营养预警详情</h5>
                    </div>
                    <div class="card-body">
                        <div th:if="${alert.hasAlerts()}">
                            <!-- 高优先级预警 -->
                            <div th:if="${alert.highPriorityAlerts.size() > 0}" class="mb-4">
                                <h6 class="text-danger">
                                    <i class="fas fa-exclamation-circle me-1"></i>
                                    高优先级预警 (<span th:text="${alert.highPriorityAlerts.size()}"></span>)
                                </h6>
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        <li th:each="alertMsg : ${alert.highPriorityAlerts}" th:text="${alertMsg}"></li>
                                    </ul>
                                </div>
                            </div>

                            <!-- 中优先级预警 -->
                            <div th:if="${alert.mediumPriorityAlerts.size() > 0}" class="mb-4">
                                <h6 class="text-warning">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    中优先级预警 (<span th:text="${alert.mediumPriorityAlerts.size()}"></span>)
                                </h6>
                                <div class="alert alert-warning">
                                    <ul class="mb-0">
                                        <li th:each="alertMsg : ${alert.mediumPriorityAlerts}" th:text="${alertMsg}"></li>
                                    </ul>
                                </div>
                            </div>

                            <!-- 低优先级预警 -->
                            <div th:if="${alert.lowPriorityAlerts.size() > 0}" class="mb-4">
                                <h6 class="text-info">
                                    <i class="fas fa-info-circle me-1"></i>
                                    低优先级预警 (<span th:text="${alert.lowPriorityAlerts.size()}"></span>)
                                </h6>
                                <div class="alert alert-info">
                                    <ul class="mb-0">
                                        <li th:each="alertMsg : ${alert.lowPriorityAlerts}" th:text="${alertMsg}"></li>
                                    </ul>
                                </div>
                            </div>

                            <!-- 操作建议 -->
                            <div class="text-center mt-4">
                                <a th:href="@{/nutrition/dashboard}" class="btn btn-primary me-2">
                                    <i class="fas fa-chart-line me-1"></i>查看营养详情
                                </a>
                                <a th:href="@{/meals}" class="btn btn-success" th:if="${isToday}">
                                    <i class="fas fa-utensils me-1"></i>去点餐
                                </a>
                            </div>
                        </div>

                        <!-- 无预警状态 -->
                        <div th:unless="${alert.hasAlerts()}" class="text-center py-5">
                            <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                            <h4 class="text-success mt-3">营养状况良好</h4>
                            <p class="text-muted">该日期没有营养预警信息</p>
                            <a th:href="@{/nutrition/dashboard}" class="btn btn-outline-primary">
                                <i class="fas fa-chart-line me-1"></i>查看营养详情
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
